<!doctype>
<html>
<head>
    <meta charset="UTF-8">
    <title>KaiX</title>
    {% load staticfiles %}
    <link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">
    <link rel="stylesheet" href="{% static "css/index.css" %}">
    <script src="{% static "js/jquery-3.3.1.min.js" %}"></script>
    <script src="{% static "js/bootstrap.min.js" %}"></script>
    <link rel="stylesheet" href="{% static "css/analysis.css" %}">
    <script src="{% static "js/highcharts.src.js" %}"></script>
</head>
<body>
<header>
<nav class="navbar nav-tabs navbar-fixed-top">
<div class="container">
  <div class="container-fluid">
    <div class="navbar-header col-sm-4">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="glyphicon glyphicon-menu-hamburger"></span>
        <span class="icon-bar"></span> <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="{% url 'blog:index' %}">KaiX</a>
    </div>
    <div class="collapse navbar-collapse col-lg-8" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="{% url 'blog:index' %}">主页</a></li>
        <li><a href="{% url 'blog:analysis' %}">分析</a></li></ul>

    </div>
  </div>
</div>
</nav>
</header>
<div class="container">
    <div class="col-lg-6">
        <div class="box">
            <div id='tall_data' class="tall_data"></div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="box">
            <div id='sex' class="sex"></div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="box">
            <div id='blog_time' class="blog_time"></div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="box">
        <div id='age'></div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="box">
            <div id='active_user' class="active_user"></div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="box">
        <div id='category'></div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="box">
        <div id='star'></div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="box">
        <div id='year'></div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="box">
        <div id='address'></div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="box">
        <div id='migrate'></div>
        </div>
    </div>
</div>
<footer>
    <div class="text-center" style="margin-top:20px;">
        <p>Copyright &copy;2018 &nbsp;<a href="http://www.zhangkaixuan.cn">KaiXuan</a></p>
    </div>
</footer>
<!--总量-->
<script type="text/javascript">
    var tall = {{ tall|safe }}
    var chart = Highcharts.chart('tall_data', {
        chart: {
            type: 'bar'
        },
        title: {
            text: '数据总量'

        },
        subtitle: {
            text: '来源:duwenzhang.com'
        },
        xAxis: {
            categories: ['文章', '用户'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '总量',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        legend: {
            enabled:false
        },
        series: [{
            name: '数量',
            data: [tall[0].number, tall[1].number]
        }],
		credits: {
			text: 'KaiX',
			href: 'http://www.zhangkaixuan.cn'
		},
    });
</script>
<!--性别比例-->
<script type="text/javascript">
    var sex = {{ sex|safe }};
    // Build the chart
    Highcharts.chart('sex', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: '性别比例'
        },
        tooltip: {
            pointFormat: '<b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            name: '性别',
            colorByPoint: true,
            data: [
                [sex[0].sex, sex[0].number],
                [sex[1].sex, sex[1].number],
                [sex[2].sex, sex[2].number],
            ]
        }],
		credits: {
			text: 'KaiX',
			href: 'http://www.zhangkaixuan.cn'
		},
    });
</script>
<!--发表文章时间段-->
<script type="text/javascript">
    var blog_time = {{ blog_time|safe }}
    var time = new Array();
    var numbers = new Array();
    for(var i in blog_time) {
        time[i] = blog_time[i].time
        numbers[i] = blog_time[i].number}
    $('#blog_time')
        .highcharts({
            title:{
                text: '发表文章时间段'
            },
            legend: {
                enabled:false
            },
            xAxis: {
                title: {
                    text: '时间',
                    align:'high'
                },
                categories: time,
                x: 200,
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                }
            },
            series:[
                {
                    name: '数量',
                    data: numbers
                }
            ],
            credits: {
                text: 'KaiX',
                href: 'http://www.zhangkaixuan.cn'
            },
            })
</script>
<!--省份分布-->
<script type="text/javascript">
    var address = {{ address|safe }}
    var province = new Array();
    var numbers = new Array();
    for(var i in blog_time) {
        province[i] = address[i].address
        numbers[i] = address[i].number}
    var chart = Highcharts.chart('address',{
        chart: {
            type: 'column'
        },
        title: {
            text: '省份分布'
        },
        xAxis: {
            categories: province,
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        legend: {
            enabled:false
        },
        series: [{
            name: '人数',
            data: numbers
        }],
		credits: {
			text: 'KaiX',
			href: 'http://www.zhangkaixuan.cn'
		},
    });
</script>
<!--迁移-->
<script type="text/javascript">
    var address = {{ migrate|safe }}
    var province = new Array();
    var numbers = new Array();
    for(var i in blog_time) {
        province[i] = address[i].address
        numbers[i] = address[i].number}
    var chart = Highcharts.chart('migrate',{
        chart: {
            type: 'column'
        },
        title: {
            text: '远离家乡'
        },
        xAxis: {
            categories: province,
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {

        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        legend: {
            enabled:false
        },
        series: [{
            name: '人数',
            data: numbers
        }],
		credits: {
			text: 'KaiX',
			href: 'http://www.zhangkaixuan.cn'
		},
    });
</script>
<!--星座-->
<script type="text/javascript">

    var star = {{ star|safe }}
    var province = new Array();
    var numbers = new Array();
    for(var i in star) {
        province[i] = star[i].star;
        numbers[i] = star[i].number}
    var chart = Highcharts.chart('star',{
        chart: {
            type: 'column'
        },
        title: {
            text: '星座'
        },
        xAxis: {
            categories: province,
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {

        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        legend: {
            enabled:false
        },
        series: [{
            name: '人数',
            data: numbers
        }],
		credits: {
			text: 'KaiX',
			href: 'http://www.zhangkaixuan.cn'
		},
    });
</script>
<!--文章分类-->
<script type="text/javascript">

    var category = {{ category|safe }}
    var province = new Array();
    var numbers = new Array();
    for(var i in category) {
        province[i] = category[i].category;
        numbers[i] = category[i].number}
    var chart = Highcharts.chart('category',{
        chart: {
            type: 'column'
        },
        title: {
            text: '文章分类'
        },
        xAxis: {
            categories: province,
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {

        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        legend: {
            enabled:false
        },
        series: [{
            name: '人数',
            data: numbers
        }],
		credits: {
			text: 'KaiX',
			href: 'http://www.zhangkaixuan.cn'
		},
    });
</script>
<!--年月总量-->
<script type="text/javascript">
    var year_month = {{ year|safe }}
    var time = new Array();
    var numbers = new Array();
    for(var i in year_month) {
        time[i] = year_month[i].year_month;
        numbers[i] = year_month[i].number}
    $('#year')
        .highcharts({
            title:{
                text: '读文章网-月发表量'
            },
            legend: {
                enabled:false
            },
            xAxis: {
                title: {
                    text: '时间',
                    align:'high'
                },
                categories: time,
                x: 200,
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                }
            },
            series:[
                {
                    name: '数量',
                    data: numbers
                }
            ],
            credits: {
                text: 'KaiX',
                href: 'http://www.zhangkaixuan.cn'
            },
            })
</script>
<!--发表最多用户-->
<script type="text/javascript">
    var active_user = {{ active_user|safe }}
    var province = new Array();
    var numbers = new Array();
    for(var i in active_user) {
        province[i] = active_user[i].user;
        numbers[i] = active_user[i].number}
    var chart = Highcharts.chart('active_user',{
        chart: {
            type: 'column'
        },
        title: {
            text: '发表最多用户'
        },
        xAxis: {
            categories: province,
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {

        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        legend: {
            enabled:false
        },
        series: [{
            name: '人数',
            data: numbers
        }],
		credits: {
			text: 'KaiX',
			href: 'http://www.zhangkaixuan.cn'
		},
    });
</script>
<!--年龄-->
<script type="text/javascript">
    var age = {{ age|safe }}
    var province = new Array();
    var numbers = new Array();
    for(var i in age) {
        province[i] = age[i].age;
        numbers[i] = age[i].number}
    var chart = Highcharts.chart('age',{
        chart: {
            type: 'column'
        },
        title: {
            text: '年龄段分布'
        },
        xAxis: {
            categories: province,
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {

        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        legend: {
            enabled:false
        },
        series: [{
            name: '人数',
            data: numbers
        }],
		credits: {
			text: 'KaiX',
			href: 'http://www.zhangkaixuan.cn'
		},
    });
</script>
<!--地图-->
</body>
</html>